/* 全局主题变量：定义在 :root 下，全局可访问 */
:root {
  /* 1. 主题色（主色、辅助色、功能色） */
  --color-primary: #165dff; /* 主色调：按钮、链接等 */
  --color-success: #00b42a; /* 成功色：提示、状态 */
  --color-warning: #ff7d00; /* 警告色：警告、提醒 */
  --color-danger: #f53f3f; /* 危险色：错误、删除 */
  --color-info: #909399; /* 危险色：错误、删除 */
  /* 2. 中性色（文本、背景、边框） */
  --color-text-1: #1d2129; /* 主文本：标题、正文 */
  --color-text-2: #4e5969; /* 次文本：说明、辅助文字 */
  --color-text-3: #86909c; /* 弱文本：占位符、备注 */
  --color-bg-1: #ffffff; /* 主背景：页面、卡片 */
  --color-bg-2: #f2f3f5; /* 次背景：区域分隔、列表项 */
  --color-bg-3: #f2f3f5; /* 弱背景：占位符、备注 */
  --color-border: #e5e6eb; /* 边框色：卡片、输入框 */
  /* 3. 尺寸规范（圆角、阴影、间距基数） */
  --radius-sm: 4px; /* 小圆角：按钮、标签 */
  --radius-md: 8px; /* 中圆角：卡片、弹窗 */
  --radius-lg: 16px; /* 大圆角：头像、特殊容器 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); /* 小阴影：卡片悬浮 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* 中阴影：弹窗、下拉菜单 */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* 大阴影：弹窗、下拉菜单 */
  /* 4. 字体规范 */
  --font-family: "Noto Sans SC", "Noto Serif SC", "Inter", "PingFang SC",
    "Microsoft YaHei", sans-serif; /* 全局字体族 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px; /* 正文默认 */
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  /* 5. 屏幕大小 */
  --breakpoint-xs: 375px; /* 超小屏（手机） */
  --breakpoint-sm: 576px; /* 小屏（手机横屏） */
  --breakpoint-md: 768px; /* 中屏（平板） */
  --breakpoint-lg: 1024px; /* 大屏（笔记本） */
  --breakpoint-xl: 1200px; /* 超大屏（桌面） */
}

/* 深色主题：通过类名切换，覆盖部分变量 */
// html.dark {
// }
// /* 浅色主题：通过类名切换，覆盖部分变量 */
// html.light {
// }
// /* 灰色主题：通过类名切换，覆盖部分变量 */
// html.gray {
// }
